<template>
  <!-- 单个排行榜 -->
  <div class="toplist-box">
    <div ref="toplistbg" class="toplist-bg">
      <h3 class="toplist-hd">
        <a
          href="javascript:;"
          class="toplist-title"
          @click="clickPlaylistDetail(toplist.id)"
        >
          <img class="toplist-hdpic" :src="toplist.coverImgUrl" alt=""
        /></a>
      </h3>
      <i
        class="mod-cover-icon-play"
        @click="clickPlaylistDetail(toplist.id)"
      ></i>
      <i class="toplist-line"></i>
      <ul class="toplist-songlist">
        <li v-for="(item, i) in playlist" :key="i" class="toplist-song">
          <div class="toplist-number">{{ i + 1 }}</div>
          <div class="toplist-songname">
            <a href="javascript:;" @click="clickSong(item.id)">{{
              item.name
            }}</a>
          </div>
          <div class="toplist-artist">
            <a
              v-for="(artist, n) in item.ar"
              :key="n"
              href="javascript:;"
              :title="artist.name"
              @click="clickArtistDetail(artist.id)"
            >
              <i v-if="n > 0"> / </i>
              {{ artist.name }}
            </a>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    playlist: {
      type: Array,
      default() {
        return [];
      },
    },
    toplist: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {};
  },
  mounted() {
    // console.log(this.playlist);
    // console.log(this.toplist);
    this.setBg();
  },
  methods: {
    clickArtistDetail(id) {
      this.playArtistDetail(id);
    },
    clickSong(id) {
      this.playSong(id);
    },
    clickPlaylistDetail(id) {
      this.playPlaylistDetail(id);
    },
    setBg() {
      this.$refs.toplistbg.style.backgroundImage =
        "url(" + this.toplist.coverImgUrl + ")";
    },
  },
};
</script>

<style>
.toplist-box {
  position: relative;
  margin-right: 20px;
  height: 500px;
  overflow: hidden;
}
.toplist-bg {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-size: 700%;
}

.toplist-box .mod-cover-icon-play {
  background-size: 72%;
  background-repeat: no-repeat;
  background-position: 50%;
  top: 114px;
  margin-top: 0;
  margin-bottom: 0;
  cursor: pointer;
}
.toplist-box:hover .mod-cover-icon-play {
  opacity: 1;
  transform: scale(1) translateZ(0);
  transition-property: opacity, transform;
  transition-duration: 0.5s;
}
.toplist-line {
  position: absolute;
  left: 50%;
  top: 148px;
  margin-left: -18px;
  width: 36px;
  height: 2px;
  background-color: #fff;
  opacity: 1;
  transform: scaleY(1) translateZ(0);
  transition-property: opacity, transform;
  transition-duration: 0.5s;
}
.toplist-box:hover .toplist-line {
  opacity: 0;
  transform: scaleY(0) translateZ(0);
  transition-property: opacity, transform;
  transition-duration: 0.5s;
}
.toplist-hd {
  position: absolute;
  top: -50px;
}
.toplist-hd .toplist-title {
  float: none;
  height: 36px;
  line-height: 1;
  font-size: 26px;
  color: #fff;
  font-weight: 400;
}
.toplist-hdpic {
  width: 100%;
}
.toplist-songlist {
  position: absolute;
  top: 188px;
  left: 20px;
  right: 20px;
  white-space: nowrap;
}
.toplist-songlist,
.toplist-songlist a {
  color: #fff;
  font-size: 14px;
}
.toplist-song {
  position: relative;
  padding-left: 15px;
  margin-bottom: 27px;
}
.toplist-number {
  position: absolute;
  top: 0;
  left: 0;
}
.toplist-songname,
.toplist-artist {
  overflow: hidden;
  text-overflow: ellipsis;
}
.toplist-songname a:hover,
.toplist-artist a:hover {
  text-decoration: underline;
}
.toplist-songname {
  margin-bottom: 5px;
}
</style>